<!-- 手机号验证码登录 绑定邀请人-->
<template>
	<view>
		<u-toast ref="uToast" />
		<!--手机短信登录-->
		<u-popup class="coreshop-bottom-popup-box" v-if="showLogin" v-model="showLogin" mode="bottom" :round="10">
			<view class="radius coreshop-bg-white" @tap.stop style="background: none;overflow: visible;">
				<view class="modal-box">
					<view class="detail">
					<!-- 	<view class="shopDesc">
							<view class="coreshop-avatar sm round margin-left">
								<u-image width="48rpx" height="48rpx" :src="shopLogo"></u-image>
							</view>
							<text class="shopName">
								{{shopName||'登录授权'}}
							</text>
							<text class="get">
								登录
							</text>
						</view> -->
						<u-tabs :list="loginList" :is-scroll="false" active-color="#18b566" inactive-color="#606266" :current="current" :font-size="28" @change="changeTab"></u-tabs>
						<view class="login-form">
							<u-form labelPosition="left" :model="model">
								<u-form-item label="手机号" :labelWidth="120" ref="mobile">
									<u-input type="tel" v-model="model.mobile" placeholder="输入手机号"></u-input>
								</u-form-item>
								<u-form-item label="密码" :labelWidth="120" ref="password" v-show="current==0">
									<u-input type="password" v-model="model.password" placeholder="输入登录密码"></u-input>
								</u-form-item>
								<u-form-item label="验证码" :labelWidth="120" ref="code" v-show="current==1">
									<u-row customStyle="margin-bottom: 10px">
										<u-col span="8">
											<u-input type="tel" v-model="model.code" placeholder="输入验证码"
												@change="checkboxChange"></u-input>
										</u-col>
										<u-col span="4">
											<u-button type="success" size="mini" :disabled="model.btnDisabled"
												@click="sendCode">{{model.btnTxt}}</u-button>
										</u-col>
									</u-row>
								</u-form-item>
							</u-form>
						</view>
						<!--   <view class="title3">获取以下权限为您提供服务</view>
                        <view class="desc">
                            1、获取你的手机号提供更好的账户安全，物流，订单状态提醒等服务（在接下来微信授权手机号的弹窗中选择“允许”）<br />
                            2、使用我们的相关服务，需要将您的手机号授权给我们。
                        </view> -->
						<!--服务协议-->
						<!-- <view class="u-margin-top-30 u-margin-bottom-30 agreement-checked-view">
							<u-checkbox v-model="agreement" @change="checkboxChange" size="30"
								active-color="#19be6b"></u-checkbox>
							<view class="coreshop-text-black-view">
								<text class="coreshop-text-black">同意</text>
								<text class="text-blue" @tap="goUserAgreementPage">《服务协议》</text>
								<text class="coreshop-text-black">与</text>
								<text class="text-blue" @tap="goUserPrivacyPolicy">《隐私协议》</text>
							</view>
						</view> -->
					</view>
					<view class="u-flex u-row-between u-padding-left-30 u-padding-right-30">
						<u-button @click="closeAuth">暂不登录</u-button>
						<u-button type="success" :disabled="isDisabled" @click="doSmsLogin"
							:loading="isLoading">立即登录</u-button>
					</view>
				</view>
			</view>
		</u-popup>
		<!--绑定邀请人-->
		<!-- <u-popup class="coreshop-bottom-popup-box" v-if="showRelation" v-model="showRelation" mode="bottom" :round="10"
			:mask-close-able="false">
			<view class="radius coreshop-bg-white" @tap.stop style="background: none;overflow: visible;">
				<view class="modal-box">
					<view class="detail">
						<view class="shopDesc">
							<view class="coreshop-avatar sm round margin-left">
								<u-image width="48rpx" height="48rpx" :src="shopLogo"></u-image>
							</view>
							<text class="shopName">
								{{shopName||'绑定推荐人'}}
							</text>
							<text class="get">
								绑定推荐人
							</text>
						</view>
						<view class="login-form">
							<u-form labelPosition="left" :model="model">
								<u-form-item label="手机号" :labelWidth="120" ref="reMobile">
									<u-input type="tel" v-model="model.reMobile" placeholder="输入推荐人手机号"></u-input>
								</u-form-item>
							</u-form>
						</view>
					</view>
					<view class="u-flex u-row-between u-padding-left-30 u-padding-right-30">
						<u-button @click="closeBind">暂不登录</u-button>
						<u-button type="success" @click="doRelation" :loading="isLoading2">立即绑定</u-button>
					</view>
				</view>
			</view>
		</u-popup> -->
	</view>
</template>

<script>
	/**
	 * 登录提示页
	 * @property {Boolean} value=showLoginTip - 由v-model控制显示隐藏。
	 * @property {Boolean} forceOauth - 小程序端特制的全屏登录提示。
	 */
	import {
		mapMutations,
		mapActions,
		mapState
	} from 'vuex';
	import {
		goods,
		articles,
		commonUse,
		tools
	} from '@/common/mixins/mixinsHelper.js'
	export default {
		mixins: [goods, articles, commonUse, tools],
		name: 'coreshopLoginModal',
		components: {},
		data() {
			return {
				loginList: [{
					name: '密码登录'
				}, {
					name: '短信登录'
				}],
				current: 0, 
				model: {
					mobile: '',
					password:'',
					mobile_chk: false,
					code: '',
					btnTxt: '获取验证码',
					btnDisabled: false,
					smsTime: 90,
					reMobile: ''
				},
				token: '',

				agreement: false,
				isDisabled: false,
				isLoading: false,
				isLoading2: false,
				showRelation: false,
			};
		},
		props: {
			value: {},
			modalType: {
				type: String,
				default: ''
			}
		},
		computed: {
			...mapState({
				showLoginTip: state => state.showLoginTip,
				sessionAuthId: state => state.sessionAuthId,
				hasLogin: state => state.hasLogin,
			}),
			shopLogo() {
				return this.$store.state.config.shopLogo
			},
			shopName() {
				return this.$store.state.config.shopName;
			},
			showLogin: {
				get() {
					return this.showLoginTip;
				},
				set(val) {
					this.$store.commit('showLoginTip', val);
				}
			},
			sessionAuthIdTool: {
				get() {
					return this.sessionAuthId;
				},
				set(val) {
					this.$store.commit('sessionAuthId', val);
				}
			}
		},
		mounted() {
			const _this = this
			// #ifdef MP-WEIXIN
			var userInfo = this.$store.state.userInfo;
			console.log(userInfo)
			//var token = this.$db.get('userToken');
			if (Object.keys(userInfo).length != 0) {
				console.log("获取到store.state用户数据");
			} else {
				_this.doToken();
			}
			// #endif
		},
		methods: {
			sendCode() {
				const _this = this
				if (_this.model.mobile == '') {
					_this.$u.toast('请输入手机号')
					return false;
				}
				var data = {
					areaCode:'+86',
					appId: this.$store.state.appId,
					mobile: _this.model.mobile,
					code: 'login'
				}
				_this.$u.api.sms(data).then(res => { 
					if (!res.status) {
						_this.$u.toast(res.msg)
						return false;
					}
					_this.model.btnDisabled = true
					_this.isDisabled = false
					var timer = setInterval(() => {
						_this.model.smsTime--
						if (_this.model.smsTime <= 0) {
							_this.model.smsTime = 90
							_this.model.btnDisabled = false
							_this.model.btnTxt = '重新发送'
							clearInterval(timer)
						} else {
							_this.model.btnTxt = _this.model.smsTime + 's后获取'
						}
					}, 1000)
				})
			},
			doSmsLogin() {
				const _this = this
				if (_this.model.mobile == '') {
					_this.$u.toast('请输入手机号')
					return false;
				}
				if (_this.current==0 && _this.model.password == '') {
					_this.$u.toast('请输入登录密码')
					return false;
				}
				if (_this.current==1 && _this.model.code == '') {
					_this.$u.toast('请输入验证码')
					return false;
				}
				_this.isLoading = true
				var data = {
					mobile: _this.model.mobile,
					code: _this.model.code,
					areaCode: '+86', 
					platform: 'sms'
				}
				_this.$u.api.smsLogin(data).then(res => {
					_this.isLoading = false
					if (!res.status) {
						_this.$u.toast(res.msg)
						return false;
					}
					//判断是否返回了token，如果没有，就说明没有绑定账号，跳转到绑定页面
					if (res.data.token) {
						_this.token = res.data.token 
					}
					_this.showLogin = false;
					_this.loginSeccess();
					return false;
				})
			},
			// 勾选版权协议
			checkboxChange(e) {
				this.agreement = e.value;
				if (e.value == true) {
					this.isDisabled = false;
				} else {
					this.isDisabled = true;
				}
				console.log(this.agreement);
			},
			closeAuth() {
				this.showLogin = false;
				this.$u.toast('您已取消登录')
			},
			// 隐藏登录弹窗
			hideModal() {
				this.showLogin = false;
			},
			closeBind() {
				this.showRelation = false;
				this.$u.toast('您已取消登录')
			},
			doRelation() {
				const _this = this
				if (_this.model.reMobile == '') {
					_this.$u.toast('请输入推荐人手机号')
					return false;
				}
				_this.isLoading2 = true
				var data = {
					appId: this.$store.state.appId,
					mobile: _this.model.mobile,
					reMobile: _this.model.reMobile,
					platform: 0
				}
				_this.$u.api.bindReMobile(data).then(res => {
					_this.isLoading2 = false
					if (!res.status) {
						_this.$u.toast(res.msg)
						return false;
					}
					_this.loginSeccess();
					_this.showRelation = false;
				})
			},
			loginSeccess() {
				console.log('success')
				const _this = this
				_this.$db.set('userToken', _this.token)
				_this.$store.commit('hasLogin', true);
				_this.$refs.uToast.show({
					title: '登录成功',
					type: 'success',
				})
				return false;
			},
			changeTab(e){
				this.current=e
			}
		}
	};
</script>

<style lang="scss">
	.modal-box {
		width: 80%;
		border-radius: 20rpx;
		background: #fff;
		position: relative;
		left: 50%;
		transform: translateX(-50%);
		padding: 30rpx;
		z-index: 11111;

		.head-bg {
			width: 100%;
			height: 210rpx;
		}

		.detail {
			width: 100%;
			text-align: center;

			.login-form {
				margin: 10vw 0;
			}

			.title1 {
				color: #46351b;
				font-size: 35rpx;
				font-weight: bold;
			}

			.title2 {
				font-size: 28rpx;
				color: #999;
				padding-top: 20rpx;
			}

			.title3 {
				color: #46351b;
				font-size: 35rpx;
				font-weight: bold;
				text-align: left;
				line-height: 35rpx;
				padding: 30rpx 0 30rpx 30rpx;
			}

			.desc {
				font-size: 24rpx;
				line-height: 40rpx;
				color: #333;
				background: #f7f8fa;
				text-align: left;
				padding: 20rpx;
			}

			.user-avatar {
				width: 160rpx;
				height: 160rpx;
				overflow: hidden;
				margin: 0 auto;
				margin-bottom: 40rpx;
			}

			.user-name {
				font-size: 35rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #845708;
				margin-bottom: 30rpx;
			}
		}
	}

	.shopDesc {
		padding: 30rpx 0rpx 0rpx 0rpx;
		text-align: left;

		.shopName {
			margin-left: 20rpx;
			line-height: 40rpx;
		}

		.get {
			margin-left: 20rpx;
			line-height: 40rpx;
		}
	}

	.agreement-checked-view {
		position: relative;
		padding: 18.18rpx 0rpx 18.18rpx 30rpx;
		display: flex;
		align-items: center;
		margin: 10rpx 0;
		font-size: 24rpx;

		.coreshop-checked {
			transform: scale(0.7);
		}
	}
</style>